// 获取盒子数组
const boxes = document.querySelectorAll('.box');

// 盒子动画
const boxAnimation = () => {
  // 浏览器视口高度
  let innerHeight = window.innerHeight;
  console.log(innerHeight);
  // 设置一个盒子动画的触发高度
  let triggerBottom = (innerHeight / 5) * 4;

  boxes.forEach((box) => {
    // 获取元素顶部距视口的高度
    let top = box.getBoundingClientRect().top;
    // 当高度小于触发高度，盒子要显示出来，否侧不表示
    if (top < triggerBottom) {
      box.classList.add('show');
    } else {
      box.classList.remove('show');
    }
  });
};

// 添加滚动监听事件
window.addEventListener('scroll', boxAnimation);
// 画面初始效果
boxAnimation();
